<template>
  <div>
    <div class="income_header" :style="{backgroundImage: `url(${background_image})`}">
      <van-button type="default" class="withdraw_button" :round="true" to="/user/withdraw" >提现</van-button>
      <div class="user_info">
        <div style="letter-spacing: 1px;">可提现收益</div>
        <div style="font-size:x-large;letter-spacing: 3px;">{{withdrawAmount  * 100 | yuan}}</div>
        <div style="font-size:small;letter-spacing: 1px;">待入帐:{{pendingAmount  * 100 | yuan}}</div>
      </div>
    </div>
    <van-cell-group>
      <van-grid :column-num="2">
        <van-grid-item>
          <van-cell label="今日直推收益">
            <template #title>
              <span>{{todayDirectAmount  * 100 | yuan}}</span>
            </template>
          </van-cell>
        </van-grid-item>
        <van-grid-item icon="photo-o">
          <van-cell label="今日裂变收益">
            <template #title>
              <span>{{todayIndirectAmount  * 100 | yuan}}</span>
            </template>
          </van-cell>
        </van-grid-item>
      </van-grid>
      <van-grid :column-num="2">
        <van-grid-item>
          <van-cell label="累计直推收益" is-link :to="{path:'/user/income/list',query:{incomeType:1}}">
            <template #title>
              <span>{{totalDirectAmount  * 100 | yuan}}</span>
            </template>
          </van-cell>
        </van-grid-item>
        <van-grid-item icon="photo-o">
          <van-cell label="累计裂变收益" is-link :to="{path:'/user/income/list',query:{incomeType:2}}">
            <template #title>
              <span>{{totalIndirectAmount  * 100 | yuan}}</span>
            </template>
          </van-cell>
        </van-grid-item>
      </van-grid>
      <van-grid :column-num="2">
        <van-grid-item icon="photo-o">
          <van-cell label="累计收益" is-link to="/user/income/list">
            <template #title>
              <span>{{withdrawAmount  * 100 | yuan}}</span>
            </template>
          </van-cell>
        </van-grid-item>
        <van-grid-item icon="photo-o">
          <van-cell label="累计提现" is-link to="/user/withdraw/list">
              <template #title>
                <span>{{totalWithdrawAmount  * 100 | yuan}}</span>
              </template>
          </van-cell>
        </van-grid-item>
      </van-grid>
    </van-cell-group>
  </div>
</template>

<script>
import {Col, Grid, GridItem, Row} from 'vant';
import {getLocalStorage} from '@/utils/local-storage';
import bg_default from "@/assets/images/user_head_bg.png";

export default {
  name: 'user-income',
  data() {
    return {
      withdrawAmount: 0,
      pendingAmount: 0,
      background_image: bg_default,
      totalAmount:0,
      todayDirectAmount:0,
      todayIndirectAmount:0,
      totalIndirectAmount:0,
      totalDirectAmount:0,
      totalWithdrawAmount:0
    };
  },
  created() {
    this.getIncome();
  },
  methods: {
    getIncome() {
      const infoData = getLocalStorage(
          'withdrawAmount','pendingAmount','totalAmount','todayDirectAmount'
          ,'todayIndirectAmount','totalIndirectAmount','totalDirectAmount'
          ,'totalWithdrawAmount'
      );
      this.withdrawAmount = infoData.withdrawAmount;
      this.pendingAmount = infoData.pendingAmount;
      this.totalAmount = infoData.totalAmount;
      this.todayDirectAmount = infoData.todayDirectAmount;
      this.todayIndirectAmount = infoData.todayIndirectAmount;
      this.totalIndirectAmount = infoData.totalIndirectAmount;
      this.totalDirectAmount = infoData.totalDirectAmount;
      this.totalWithdrawAmount = infoData.totalWithdrawAmount;
    },
  },
  components: {
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [Row.name]: Row,
    [Col.name]: Col
  }
};
</script>

<style lang="scss" scoped>
.income_header {
  background-repeat: no-repeat;
  background-size: cover;
  height: 130px;
  text-align: center;
  color: #fff;
  padding-top: 30px;
}
.user_info{
  margin-bottom: 10px;
  margin-left: 15px;
  float: left;
  div{
    padding: 1px;
    text-align: left;
  }
}
.withdraw_button{
  float: right;
  margin-right: 26px;
  width: 90px;
  height: 30px;
  margin-top: 38px;
}
.van-grid{
  text-align: center;
  height: 150px;
  font-weight: 700;
}
</style>
